<template>
  <van-row style="padding: 16px 20px;">
    <van-col span="4" style="display: flex; align-items: center;">
      <router-link to="javascript:void(0)" class="back-button" @click="$router.go(-1)">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M15.41 7.41L14 6L8 12L14 18L15.41 16.59L10.83 12L15.41 7.41Z" fill="#000000"/>
        </svg>
      </router-link>
    </van-col>

    <van-col span="16">
      <span style="font-size: 18px; font-weight: bold; display: block; text-align: center;">我的</span>
    </van-col>
  </van-row>
    <div class="follow-page">
<!--        <van-search v-model="value" placeholder="请输入搜索关键词"  @submit.prevent="handleSearch(value)">
      <button class="search-button" type="submit">搜索</button>
        </van-search>-->
      <form class="search-form" @submit.prevent="handleSearch(keyWord)">
        <input
            type="text"
            class="search-input"
            placeholder="请输入你的搜索内容"
            v-model="keyWord"
        />
        <button class="search-button" type="submit">搜索</button>
      </form>

      <van-tabs v-model:active="activeTab">
        <van-tab title="关注">
          <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
          >
            <van-cell
                v-for="user in users"
                :key="user.id"
                :title="user.username"
                :label="user.description"
                :is-link="false"
            >
              <template #icon>
                <van-image :src="user.imageUrl" width="40" height="40" round />
              </template>
              <template #label>
                <div>{{user.description}}</div>
                <div>粉丝数：{{user.followersCount}}万</div>
              </template>
              <template #right-icon>
                <van-button size="small" type="primary" @click="followUser(user.id)">
                  {{ user.followed ? '已关注' : '关注' }}
                </van-button>
              </template>
            </van-cell>
          </van-list>
        </van-tab>
        <van-tab title="粉丝">
          <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
          >
            <van-cell
                v-for="user in users"
                :key="user.userId"
                :title="user.username"
                :label="user.description"
                :is-link="false"
            >
              <template #icon>
                <van-image :src="user.imageUrl" width="40" height="40" round />
              </template>
              <template #label>
                <div>{{user.description}}</div>
                <div>粉丝数：{{user.followersCount}}万</div>
              </template>
            </van-cell>
          </van-list>
          <!-- 粉丝列表实现 -->
        </van-tab>
      </van-tabs>
    </div>
</template>

<script setup>
import {ref} from 'vue'
import {useRouter} from "vue-router";
import axios from "axios";
import {showConfirmDialog, showToast} from 'vant';
import {getUsers} from "../../api/follow.js";
import {get} from "../../util/request.js";
const router=useRouter();
const activeTab = ref(0);
const value = ref("");
const keyWord = ref("")
const users = ref([
  {id:1,name:'张三',description:'你们好你你你你你你你你你你你你你您那你你你你你你你',followersCount:3000000,imageUrl:""}
]);
const loading = ref(false);
const finished = ref(false);

const followUser = (id) => {
  const user = users.value.find((u) => u.id === id);
  if (user) {
    user.followed = !user.followed;
  }
};

// 综合方式
const onLoad = () => {
  get('user/findAllFollows'
  ).then(
      (data) => {
        console.log(JSON.stringify(data))
        // 加载状态结束
        loading.value = false;
        finished.value = true

        if (data.code == 0) {
          showToast("查询成功");
          users.value = data.data;// 初始化界面
        } else {
          showToast("查询失败");
        }


      })
      .catch(
          function () {
            alert("服务器错误")
          }
      )
};
const handleSearch =(keyWord)=>{
  get(
    'user/findByMapFollows',
    {
      username: keyWord
    }
  ).then( (data) => {
    console.log(JSON.stringify(data))

    // 加载状态结束
    loading.value = false;
    finished.value = true

    if (data.code == 0) {
      showToast("查询成功");
      users.value = data.data;// 初始化界面
    } else {
      showToast("查询失败");
    }

  }).catch(
      function () {
        alert("服务器错误")
      }
  )
}

</script>

  <style scoped>
    .follow-page {
      padding: 16px;
    }
    .search-form {
      position: relative;
      margin-left: 10px;
    }
  </style>